﻿@{
    ViewBag.Title = "首页";
    Layout = "~/Views/Shared/_Layout2.cshtml";
}
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/slidejs.css")"/>
<div class="page-index">
	<div class="bigSlideBox">
		<div id="slides">
			<div class="slides_container">
				@for (var i = 1; i <= 7; i++)
    {
					<div class="slide">
						<a href="#" title="提示提示@(i)" target="_blank"><img src="/Content/temp/@(i).jpg" width="1005" height="465" alt="Slide @i"></a>
						<div class="caption" style="bottom:0">
							<p>介绍介绍介绍@(i)</p>
						</div>
					</div>
    }
			</div>
			<a href="#" class="prev"><img src="/Content/slidejs/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
			<a href="#" class="next"><img src="/Content/slidejs/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
		</div>
        </div>
	<div class="columns fn-clear">
		<div class="col1 fn-left">
			<h2 class="title">
				<span class="zh"><span class="blue">产品</span>展示</span>
				<span class="en">NEW PRODUCTS</span>
				<span class="paging">
					<a href="#">1</a>
					<a href="#">2</a>
					<a href="#">3</a>
					<a href="#">4</a>
					<a href="#">5</a>
				</span>
			</h2>
			<div class="cnt fn-clear">
				<div class="pic fn-left">
					<a href="#"><img src="@Url.Content("~/Content/images/pic-index.png")" width="183" height="146" /></a>
				</div>
				<div class="text fn-right">
					<p class="title"><a href="#">中舒产品</a></p>
					<p class="summary">广州若羽信息科技广州若羽信息科技广州若羽信息科技广州若羽信息科技...</p>
					<p class="btnDetail"><a href="#">查看详情 &gt;</a></p>
				</div>
			</div>
		</div>
		<div class="col2 fn-left">
			<h2 class="title">
				<span class="zh">
					<span class="blue">新闻</span>咨询
				</span>
				<span class="en">NEWS</span>
				<span class="more">
					<a href="#">MORE+</a>
				</span>
			</h2>
			<div class="cnt">
				<ul>@for (var i = 1; i < 5; i++)
        {
						<li><span class="date">2012/6/12</span> <a href="#">十个方法，让你的线框原型更具沟通能力</a><span class="new">new</span></li>}
				</ul>
			</div>
		</div>
		<div class="col3 fn-left">
			<ul class="fn-clear">
				<li><a href="#">产品目录</a></li>
				<li><a href="#">在线留言</a></li>
				<li><a href="#">联系方式</a></li>
				<li><a href="#">关于我们</a></li>
			</ul>
		</div>
	</div>
</div>
@section scripts
{
	<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.slides.min.js")"></script>
	<script type="text/javascript">
    $(function () {
        $('#slides').slides({
            preload: true,
            preloadImage: '/Content/slidejs/loading.gif',
            play: 5000,
            pause: 2500,
            hoverPause: true,
            animationStart: function (current) {
                $('.caption').animate({
                    bottom: -35
                }, 100);
            },
            animationComplete: function (current) {
                $('.caption').animate({
                    bottom: 0
                }, 200);
            },
            slidesLoaded: function () {
                $('.caption').animate({
                    bottom: 0
                }, 200);
            }
        });
    });
	</script>
}